<template>
	<view class="anmed">
		<view class="my-top">
			<image class="header" src="https://xcx.xiaombt.com/img/img/header.png" mode="" :style="{ height: navbarHeight + 'px' }">
			</image>
			<view class="nav">
				<u-navbar title="我的设置" :autoBack='true' bgColor="transparent" leftIconColor='#6C5D47'
					titleStyle='color:#6C5D47' placeholder>
				</u-navbar>
			</view>
		</view>
		<view class="main" :style="{ marginTop: viewHeight + 'px' }">
		<view class="avatar">
		  <u-avatar :size="70" :src="userInfo.headPicture"></u-avatar>
		  <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">更换头像</button>
		</view>
			 <view class="box">
			   <view class="lable">昵称</view>
			   <view style="display: flex;align-items: center;">
			     <view class="content">
			       <input style="text-align: right;" type="nickname" maxlength="14" v-model="userInfo.nickName" placeholder="请输入昵称"/>
			     </view>
			   </view>
			 </view>
			 <view class="box">
			   <view class="lable">手机号</view>
			   <view style="display: flex;align-items: center;">
			     <view class="content">
			       <input style="text-align: right;" type="tel" maxlength="14" v-model="userInfo.phone" placeholder="请输入手机号"/>
			     </view>
			   </view>
			 </view>
			 <view class="box">
			   <view class="lable">单位名称</view>
			   <view style="display: flex;align-items: center;">
			     <view class="content">
			       <input style="text-align: right;" type="text"  v-model="userInfo.com" placeholder="请输入单位名称"/>
			     </view>
			   </view>
			 </view>
			 <view class="box">
			   <view class="lable">地址</view>
			   <view style="display: flex;align-items: center;">
			     <view class="content">
			       <input style="text-align: right;" type="text"  v-model="userInfo.add" placeholder="请输入地址"/>
			     </view>
			   </view>
			 </view>
			 <view class="sub">
			   <view class="btn" @click="submit">完成</view>
			 </view>
		</view>

	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				viewHeight: null,
				navbarHeight: null,
			userInfo:{
				
			}
			};
		},
		components:{
			
		},
		async onLoad() {



			const query = uni.createSelectorQuery().in(this);
			query.select('.nav').boundingClientRect(data => {
				if (data) {
					this.navbarHeight = data.height;
				}
			}).exec();
			query.select('.my-top').boundingClientRect(data => {
				if (data) {
					this.viewHeight = data.height;
				}
			}).exec();






		},
		methods: {
			submit() {
			  if(this.userInfo.nickName==='') {
			    uni.showToast({
			      title: '请填写昵称',
			      icon: 'none'
			    });
			    return
			  }
			  uni.showLoading();
			  saveUserInfo({...this.userInfo, openId: uni.getStorageSync('openid')}).then(res => {
			    uni.hideLoading();
			    uni.setStorageSync('userInfo', this.userInfo)
			    if(!res.result) {
			      uni.showToast({
			        title: res.msg,
			        icon: 'none'
			      });
			    } else {
			      uni.showToast({
			        title: '保存成功',
			        icon: 'none'
			      });
			      setTimeout(() => {
			        this.goBack()
			      }, 1000)
			    }
			  })
			},
   onChooseAvatar(e) {
      const that = this
      uni.showLoading({
        mask: true
      })
      uni.uploadFile({
        url: ENV.BASE_API + '/demo/file/image',
        filePath: e.detail.avatarUrl,
        name: 'file',
        success: (res) => {
          uni.hideLoading();
          let ress = JSON.parse(res.data)
          that.userInfo.headPicture = ress.data
        },
        fail: (err) => {
          uni.hideLoading();
          uni.showModal({
            content: err.errMsg,
            showCancel: false
          });
        },
      })
    },
		}
	};
</script>


<style lang="scss" scoped>
	
	.anmed {
		width: 100%;
		min-height: 100vh;
		background: #F2EFE9;
	}
	.main {
		width: 90%;
		margin: auto;
		padding: 42rpx 0;

	
	}

.avatar {
  width: 100%;
  background: #fff;
  border-radius: 20rpx;
  padding: 20rpx 0 32rpx;
  text-align: center;
  margin-top: 30rpx;
  margin-bottom: 32rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .avatar-wrapper {
    margin-top: 18rpx;
    border-radius: 34rpx;
    background-color: #F4F4F4;
    border: none;
    // width: 116rpx;
    // height: 40rpx;
    // line-height: 40rpx;
    width: 160rpx;
    height: 60rpx;
    line-height: 60rpx;
    flex-shrink: 0;
    color: #999;
    text-align: center;
    font-family: PingFang SC;
    font-size: 26rpx;
  }
}

.box {
  border-radius: 20rpx;
  background: #FFF;
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;

  .lable {
    color: #999;
    font-family: PingFang SC;
    font-size: 30rpx;
  }
  .content {
    color: #333;
    font-family: PingFang SC;
    font-size: 30rpx;
    position: relative;
    .getPhoneNumber {
      position: absolute;
      z-index: 99;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0;
    }
  }
  .right {
    margin-left: 40rpx;
    height: 36rpx;

    image {
      width: auto;
      height: 36rpx;
    }
  }
}
.sub {
  margin-top: 80rpx;
  .btn {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
  
    background: url(https://xcx.xiaombt.com/img/img/button.png) no-repeat;
	background-size: 100% 100%;
    color: #FFF;
    font-family: PingFang SC;
    font-size: 36rpx;
    text-align: center;
    margin: 0 auto;
  }
}


	.my-top {
		width: 100%;
		background-color: #F2EFE9;
		position: fixed;
		z-index: 10000;
		top: 0;
		left: 0;

		.header {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		.select {
			padding: 20rpx 38rpx;
			background-color: #fff;

			.center {
				width: 100%;
				height: 76rpx;
				position: relative;
				display: flex;
				align-items: center;
				padding: 20rpx 10rpx;
				box-sizing: border-box;
				justify-content: center;

				image {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
				}
			}
		}

	}
</style>